<template>
    <view class="report-container">
        <uni-nav-bar fixed left-icon="left" title="统计报表" @clickLeft="backHandle" class="unibarS"></uni-nav-bar>
        <view class="tab-box">
            <u-grid :border="false" col="3">
                <u-grid-item>
                    <view class="grid-box" @click="goDetails">
                        <u--image :src="'/static/img/crm/report_1.png'" width="96rpx" height="96rpx"></u--image>
                        <text class="grid-text">业绩目标完成度</text>
                    </view>
                </u-grid-item>
                <u-grid-item>
                    <view class="grid-box" @click="goComplete()">
                        <u--image :src="'/static/img/crm/report_2.png'" width="96rpx" height="96rpx"></u--image>
                        <text class="grid-text">业绩完成度排名</text>
                    </view>
                </u-grid-item>
                <u-grid-item>
                    <view class="grid-box" @click="goReceipt()">
                        <u--image :src="'/static/img/crm/report_3.png'" width="96rpx" height="96rpx"></u--image>
                        <text class="grid-text">回款数据排名</text>
                    </view>
                </u-grid-item>
                <u-grid-item>
                    <view class="grid-box" @click="goDeal()">
                        <u--image :src="'/static/img/crm/report_4.png'" width="96rpx" height="96rpx"></u--image>
                        <text class="grid-text">成交数据排名</text>
                    </view>
                </u-grid-item>
                <u-grid-item>
                    <view class="grid-box" @click="goNew()">
                        <u--image :src="'/static/img/crm/report_5.png'" width="96rpx" height="96rpx"></u--image>
                        <text class="grid-text">业务新增汇总</text>
                    </view>
                </u-grid-item>
            </u-grid>
        </view>
        <!-- 业绩 -->
        <view class="data-box">
            <view class="data-title">
                <view class="data-title-text">业绩目标</view>
                <view class="data-title-more" @click="goDetails">
                    <text>详情</text>
                    <uni-icons type="right" size="18" color="#000000"></uni-icons>
                </view>
            </view>
            <!-- 环图 -->
            <view class="ring-box">
                <view style="width: 400rpx; height: 400rpx;">
                    <l-echart ref="chart"></l-echart>
                </view>
                <view class="money-box">
                    <view>
                        <view class="money-title">目标金额</view>
                        <view class="money-num">￥{{ chartData.annualTarget }}</view>
                    </view>
                    <view>
                        <view class="money-title">完成金额</view>
                        <view class="money-num">￥{{ chartData.totalAmount }}</view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 成交排名 -->
        <view class="data-box">
            <view class="data-title">
                <view class="data-title-text">成交排名</view>
                <view class="data-title-more" @click="goDeal()">
                    <text>详情</text>
                    <uni-icons type="right" size="18" color="#000000"></uni-icons>
                </view>
            </view>
            <view class="rank-box">
                <view class="rank-head">
                    <view class="left-box">排名</view>
                    <view class="right-box">
                        <view class="name-box">姓名</view>
                        <view class="money-box">成交额</view>
                    </view>
                </view>
                <view class="rank-list">
                    <view class="rank-item" v-for="(item, index) in rankList" :key="index">
                        <view class="left-box">{{ item.ranking }}</view>
                        <view class="right-box">
                            <view class="top-box">
                                <view class="name-box">{{ item.userName }}</view>
                                <view class="money-box">￥{{ item.totalAmount }}</view>
                            </view>
                            <!-- <view class="bottom-box">
                                <u-line-progress :percentage="item.conversionRate" :showText="false"></u-line-progress>
                            </view> -->
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
import { calculateDateRange } from '@/common/utils'
export default {
    data() {
        return {
            rankList: [],
            chartData: {
                annualTarget: 0,
                totalAmount: 0,
                conversionRate: 0 // 完成比率
            },
            queryData: {
                pageNum: 1,
                pageSize: 10,
                performanceType: 2,
                startTime: null,
				endTime: null
            }
        }
    },
    created() {
        const [start, end] = calculateDateRange(1)
        this.queryData.startTime = start
        this.queryData.endTime = end

        this.getData()
        // 个人 成交排名
        this.getPersonage()
        setTimeout(() => {
            this.InfinityChart()
        }, 500)
    },
    methods: {
        getData() {
            this.$http.get('/app/statistics/performance/yearList', {}).then(res => {
                if (res.code == 200) {
                    this.chartData.annualTarget = res.data.annualTarget
                    this.chartData.totalAmount = res.data.totalAmount
                    this.chartData.conversionRate = res.data.conversionRate
                } else {
                    uni.$u.toast(res.msg)
                }
            })
        },
        getPersonage() {
            this.$http.get('/app/statistics/performance/personageOrderList', this.queryData).then(res => {
                if (res.code == 200) {
                    this.rankList = res.rows
                }
            })
        },
        // 业绩详情
        goDetails() {
            uni.navigateTo({
                url: '/pages/index/performance'
            })
        },
        // 业绩完成度
        goComplete() {
            uni.navigateTo({
                url: '/pages/crm/report/pCompletion'
            })
        },
        // 成交数据排名
        goDeal() {
            uni.navigateTo({
                url: '/pages/crm/report/deal'
            })
        },
        // 回款数据排名
        goReceipt() {
            uni.navigateTo({
                url: '/pages/crm/report/receivables'
            })
        },
        // 业务新增
        goNew() {
            uni.navigateTo({
                url: '/pages/crm/report/business'
            })
        },
        InfinityChart() {
            console.log('初始化环图')
            this.$refs.chart.init(echarts, chart => {
                let option = {
                    tooltip: {
                        trigger: 'item',
                        show: false
                    },
                    legend: {
                        show: false,
                        top: '5%',
                        left: 'center'
                    },
                    series: [{
                        name: '',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 13,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: this.chartData.annualTarget, name: '目标金额' },
                            { value: this.chartData.totalAmount, name: '完成金额' }
                        ]
                    }]
                }
                chart.setOption(option);

            });
        },
        backHandle() {
            uni.navigateBack()
        }
    }
}
</script>

<style lang="scss" scoped>
.report-container {

    .data-box {
        background: white;
        padding: 30rpx 30rpx;

        .data-title {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .data-title-text {
                font-size: 32rpx;
                font-weight: 500;
                color: rgba(12, 16, 25, 1);
            }

            .data-title-more {
                display: flex;
                align-items: center;

                text {
                    font-size: 28rpx;
                    color: rgba(103, 117, 133, 1);
                }
            }
        }

        .ring-box {
            display: flex;

            .money-box {
                display: flex;
                flex-direction: column;
                justify-content: space-around;

                .money-title {
                    font-size: 24rpx;
                    color: rgba(103, 117, 133, 1);
                    margin-bottom: 16rpx;
                }

                .money-num {
                    font-size: 48rpx;
                    font-weight: 500;
                    color: rgba(0, 0, 0, 1);
                }
            }
        }

        .rank-box {
            .left-box {
                width: 100rpx;
            }

            .name-box {
                flex: 1;
            }

            .money-box {
                width: 160rpx;
            }
        }

        .rank-head {
            margin: 40rpx 0;
            display: flex;
            font-size: 24rpx;
            font-weight: 400;
            color: rgba(103, 117, 133, 1);

            .right-box {
                flex: 1;
                display: flex;
            }
        }

        .rank-item {
            display: flex;
            align-items: center;
            margin-bottom: 40rpx;

            .right-box {
                flex: 1;

                .top-box {
                    display: flex;
                    font-size: 28rpx;
                    font-weight: 500;
                    color: rgba(12, 16, 25, 1);
                    // margin-bottom: 10rpx;

                }
            }
        }
    }

    .tab-box {
        padding: 10rpx 0;
        border-radius: 24rpx;
        background: rgba(255, 255, 255, 1);
        margin: 32rpx 0;
    }

    .grid-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20rpx 0;

        .grid-text {
            font-size: 24rpx;
            font-weight: 400;
            color: rgba(12, 16, 25, 1);
            margin-top: 20rpx;
        }
    }
}
</style>